<%--
  Created by IntelliJ IDEA.
  User: cx
  Date: 2019/9/6
  Time: 13:48
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>上师列表</title>
    <link type="text/css" rel="stylesheet" href="../layui/css/layui.css">
    <script type="text/javascript" src="../layui/layui.js"></script>
    <script type="text/javascript" src="../js/jquery-1.12.4.js"></script>
    <script type="text/javascript">
        layui.use(["table","form","layer"],function () {
            var table=layui.table;
            var form=layui.form;
            var layer=layui.layer;
            table.render({
                elem:"#myTable",
                title:"用户列表",
                url:"${pageContext.request.contextPath}/selectAllUser",
                page: true,//开启分页,
                toolbar:"#myToolbar",//id选择器的写法
                // limit:10,
                title:"用户列表",
                cols:[[
                    {type:"checkbox"},
                    {title:"编号",field:"userId"},
                    {title:"电话",field:"userTelphone"},
                    {title:"密码",field:"userPassword"},
                    {title:"头像",field:"userImage",templet:function(d){return '<div><img src=${pageContext.request.contextPath}/'+d.userImage+'></div>'}},
                    {title:"昵称",field:"userNickName"},
                    {title:"姓名",field:"userName"},
                    {title:"性别",field:"userSex"},
                    {title:"个性签名",field:"userAutograph"},
                    {title:"省",field:"userProvince"},
                    {title:"城市",field:"userCity"},
                    {title:"关注的上师",field:"guruId"},
                    {title:"状态",field:"userStatus",templet:"#userStatusTemplet"},
                    {field:"操作",templet:"#cz"}
                ]]
            })
        })
        function  search() {
            var userName=$("#userName").val();
            layui.use(["table","form","layer"],function () {
                var table = layui.table;
                table.reload("myTable",{
                    where:{"userName":userName}
                });
            })
        }
        /*function add() {
            $("#did").val(0);
            $("#addSubMit").show();
            $("#updateSubMit").hide();
            layui.use("layer",function () {
                var layer=layui.layer;
                layer.open({
                    title:"添加上师",
                    content:$("#addForm"),
                    type:1
                })
            })
        }*/

        // 公共变量 有没有选择图片
        var file_upload_status = false;

        // 打开添加弹窗 和 更新用的不是一个form
        function toOpenAddLayer() {
            layui.use('layer', function(){
                layer.open({
                    title:"添加新轮播图",
                    content:$("#addForm"),
                    type:1
                })
            });
        }

        //添加的文件上传组件
        layui.use('upload', function(){
            var upload = layui.upload;
            var uploadInst = upload.render({
                elem: '#addUpload',
                url: '${pageContext.request.contextPath}/insertGuru',
                // 1.开启多文件上传 有一个文件队列（集合）
                multiple: true,
                number:1,
                data:{
                    userTelphone:function(){
                        return $('#userTelphone').val();
                    },
                    userPassword:function(){
                        return $('#userPassword').val();
                    },
                    userNickName:function () {
                       return $("#userNickName").val();
                    },
                    userName :function(){
                        return $("#userName").val();
                    },
                    userSex:function(){
                         return $("#userSex").val();
                     },
                    userAutograph:function(){
                       return $("#userAutograph").val();
                   },
                    userProvince:function(){
                         return $("#userProvince").val();
                    },
                    userCity:function(){
                        return $("#userCity").val();
                  }

                },
                //不让文件上传组件自动上传
                auto:false,
                //绑定提交按钮,让按钮决定什么时候提交
                bindAction: '#addSubMit',
                choose: function(obj){
                    //console.info("klkkk")
                    var files = this.files = obj.pushFile();
                    //预读本地文件示例，不支持ie8
                    obj.preview(function(index, file, result){
                        file_upload_status = true;
                        $('#imgdemo1').attr('src', result);//图片链接（base64）
                    });

                },done: function(res, index, upload){

                    // console.info(index);
                    layer.closeAll('page');
                    var table=layui.table;
                    table.reload("myTable");

                    file_upload_status = false;
                    $('#imgdemo1').attr('src', "");
                    delete this.files[index];
                }
            });
        });

        function add() {
            if(!file_upload_status){
                console.info("没有选择图片 可以执行ajax")
                $.ajax({
                    url:"${pageContext.request.contextPath}/insertUser",
                    data:{
                        userTelphone:$("#userTelphone").val(),
                        userPassword:$("#userPassword").val(),
                        userNickName :$("#userNickName").val(),
                        userName :$("#userName").val(),
                        userSex :$("#userSex").val(),
                        userAutograph:$("#userAutograph").val(),
                        userProvince:$("#userProvince").val(),
                        userCity:$("#userCity").val()

                    },
                    success:function (data) {
                        console.info(data)
                    }
                })
            }

        }

        function showOne(guruId) {
            $.ajax({
                url:"${pageContext.request.contextPath}/selectByGuruId",
                data:"guruId="+guruId,
                type:"post",
                success:function (data) {
                    $("#guruId").val(data.guruId);
                    $("#guruName1").val(data.guruName);
                    $("#guruImage").val(data.guruImage);
                    $("#guruNickName").val(data.guruNickName);
                    $("#guruStatus").val(data.guruStatus);
                }
            })
            $("#addSubMit").hide();
            $("#updateSubMit").show();
            layui.use("layer",function () {
                var layer = layui.layer;
                layer.open({
                    title: "修改上师",
                    content: $("#addForm"),
                    type: 1,
                    maxmin: true
                })
            })
            layui.use(["table","form","layer"],function () {
                var table=layui.table;
                var form=layui.form;
                var layer=layui.layer;
                form.on("submit(update)",function (data) {
                    $.ajax({
                        url:"${pageContext.request.contextPath}/updateGuru",
                        data:data.field,
                        success:function (data) {
                            layer.closeAll("page");
                            if(data.isUpdate){
                                layer.alert("修改成功",{time:2000});
                            }else {
                                layer.alert("修改失败",{time:2000});
                            }
                            table.reload("myTable");
                        }
                    })
                })
            })
        }

    </script>

    <script id="userStatusTemplet" type="text/html">
        {{#  if(d.userStatus == 0){ }}
        正常
        {{#  } else { }}
        已删除
        {{#  } }}
    </script>
    <style type="text/css">
        .layui-table-cell {
            height: auto;
            line-height: 28px;
        }
    </style>
</head>
<body>
<div id="cz" style="display:none;">
    <button class="layui-btn layui-btn-normal" onclick="showOne('{{d.userId}}')">修改</button>
    <button class="layui-btn layui-btn-danger" onclick="deleteD('{{d.userId}}')">删除</button>
</div>
<button type="button" class="layui-btn" onclick="toOpenAddLayer()">
    <i class="layui-icon">&#xe608;</i> 添加用户
</button>
<button type="button" class="layui-btn layui-btn-danger" onclick="deleteAlls()">
    <i class="layui-icon">&#xe640;</i> 批量删除
</button>
<div class="layui-inline" id="search">
    <label class="layui-form-label">查询名称</label>
    <div class="layui-input-inline" style="width: 200px;">
        <input type="text" class="layui-input" id="userNickName">
    </div>
    <div class="layui-input-inline" style="width: 100px;">
        <button type="button" class="layui-btn layui-btn-normal" onclick="search()">
            <i class="layui-icon layui-icon-search"></i> 搜索
        </button>
    </div>
</div>
<table id="myTable"></table>
<form class="layui-form" style="display: none" id="addForm">
   <%-- <div class="layui-form-item">
        <label class="layui-form-label">用户编号</label>
        <div class="layui-input-block">
            <input  id="userId"  name="userId" autocomplete="off" class="layui-input" readonly>
        </div>
    </div>--%>
    <div class="layui-form-item">
        <label class="layui-form-label">用户电话</label>
        <div class="layui-input-block">
            <input type="text" name="userTelphone" id="userTelphone" required  lay-verify="required|guruName" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">密码</label>
        <div class="layui-input-inline">
            <input type="text" name="userPassword" id="userPassword" required lay-verify="required|guruImage"  autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">用户头像</label>
        <div class="layui-upload">
            <button type="button" class="layui-btn" id="addUpload">上传图片</button>
            <div class="layui-upload-list">
                <img style="width: 100px;height: 100px" class="layui-upload-img" id="imgdemo1">
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">用户昵称</label>
        <div class="layui-input-inline">
            <input type="text" name="userNickName" id="userNickName" required lay-verify="required|guruStatus" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">用户姓名</label>
        <div class="layui-input-inline">
            <input type="text" name="userName" id="userName" required lay-verify="required|guruStatus" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">用户性别</label>
        <div class="layui-input-inline">
            <input type="text" name="userSex" id="userSex" required lay-verify="required|guruStatus" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">个性签名</label>
        <div class="layui-input-inline">
            <input type="text" name="userAutograph" id="userAutograph" required lay-verify="required|guruStatus" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">省份</label>
        <div class="layui-input-inline">
            <input type="text" name="userProvince" id="userProvince" required lay-verify="required|guruStatus" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">所在市</label>
        <div class="layui-input-inline">
            <input type="text" name="userCity" id="userCity">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">上师id</label>
        <div class="layui-input-inline">
            <input type="text" name="guruId" id="guruId" >
        </div>
    </div>



    <div class="layui-form-item">
        <button  type="button" lay-submit lay-filter="adds" class="layui-btn" id="addSubMit">添加</button>
        <button  type="button" lay-submit lay-filter="update" class="layui-btn" id="updateSubMit">修改</button>

        <button  type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
</form>






</body>
</html>
